<template>
    <div class="dialog-box">
        <el-dialog class="dialog" v-model="visible" title="资产转移" top="20px" draggable overflow
            :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                    <div :id="titleId" :class="titleClass">资产转移</div>
                    <div class="header-tip">会员：{{ user.re.cardList ? user.re.cardList[currentCard].cardNo : '' }}</div>
                </div>
            </template>
            <el-divider />

            <div class="dialog-content">
                <div class="rule-box">
                    <div class="title">资产转移说明</div>
                    <div class="content">1、把一个会员卡的余额转移到另外一个会员卡上；</div>
                    <div class="content">2、目标会员与原卡必须属于同一品牌卡，或者同一个联盟卡；</div>
                    <div class="content">3、不能跨卡类型转移资产；</div>
                </div>
                <el-form ref="formRef" :model="form.re" label-width="auto" size="large" style="margin-top: 30px;"
                    :inline="true" :rules="rules">
                    <!-- <div>调账类型</div> -->
                    <div class="form">
                        <el-row class="row-bg">
                            <el-col :span="24">
                                <el-form-item label="原会员手机：" style="width:100%;">
                                    {{ user.re.mobile }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="原卡类型：" style="width:100%;">
                                    {{ user.re.cardList ? user.re.cardList[currentCard].cardName : '' }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="本金：" prop="fromAmt" style="width:100%;">
                                    <el-input v-model="form.re.fromAmt" disabled placeholder="输入本金" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="金币" prop="fromCoins" style="width:100%;">
                                    <el-input v-model="form.re.fromCoins" disabled placeholder="输入金币" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="积分：" prop="fromPoint" style="width:100%;">
                                    <el-input v-model="form.re.fromPoint" disabled placeholder="输入积分" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="赠送金额：" prop="fromPreAmt" style="width:100%;">
                                    <el-input v-model="form.re.fromPreAmt" disabled placeholder="输入赠送金额" />
                                </el-form-item>
                            </el-col>
                            <el-divider style="margin-bottom: 20px;" />
                            <h3 style="margin-bottom: 10px;">转移到会员</h3>
                            <el-col :span="24">
                                <el-form-item label="新会员手机号：" prop="toTel" style="width:100%;">
                                    <el-input v-model="form.re.toTel" placeholder="输入手机号码" style="width: 60%;" clearable />
                                    <el-button type="primary" style="margin-left: 10px;background-color: #ffd400;border: none;color: #212121;" @click="handleCheck">验证</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="新会员卡号类型：" prop="toNo" style="width:100%;">
                                    <el-select v-model="form.re.typeCode" filterable clearable placeholder="选择会员卡">
                                        <el-option v-for="item in cardType_options.re" :label="item.carName"
                                            :value="item.no" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="新会员姓名：" prop="toNo" style="width:100%;">
                                    {{ form.re.name }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="新会员卡号：" prop="toNo" style="width:100%;">
                                    {{ form.re.typeCode }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="备注：" prop="remark" style="width:100%;">
                                    <el-input v-model="form.re.remark" placeholder="输入备注" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>

            <div class="footer-box">
                <el-button class="cancel" @click="handleCancel">取消</el-button>
                <el-button class="submit" @click="handleSubmit">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script setup>
import Api from '@/api'
const props = defineProps({
    visible: {
        type: Boolean,
        required: false,
    }
})
const visible = toRef(props, 'visible')
const rules = reactive({
    fromAmt: [{ required: true, message: '请输入本金', trigger: 'change' },],
})

let shop_options = reactive([
    { label: '店1', value: '1' },
    { label: '店2', value: '2' },
    { label: '店2', value: '3' },
])
let reason_options = reactive([
    { label: '充值错误', value: '1' },
    { label: '充值不到账', value: '2' },
    { label: '充值漏了', value: '3' },
])
// 获取会员卡类型OPTIONS
let cardType_options = reactive({ re: [] })
// const get_cardType_options = (params) => {
//     Api.Common.PcObjProcess.Do({ "functionName": "GetDicData", "orgCode": "0004", "contentData": { parentCode: '571' } }).then(res => {
//         console.log('获取会员卡类型OPTIONS res :>> ', res,);
//         cardType_options.re = res.result
//     })
// }
// get_cardType_options()
// 打开窗口
let user = reactive({
    re: {}
})
let currentCard = ref(0)
const open = (data) => {
    console.log('data :>> ', data);
    user.re = data.user
    currentCard.value = data.currentCard
    form.re.fromAmt = user.re.cardList[currentCard.value].currentAmt
    form.re.fromCoins = user.re.cardList[currentCard.value].currentCoins
    form.re.fromPoint = user.re.cardList[currentCard.value].currentPoint
    form.re.fromPreAmt = user.re.cardList[currentCard.value].currentPresentAmt
    // console.log(info.re, currentCard.value, info.re.cardList[0])
}
// 暴露方法
defineExpose({ open })

let form = reactive({ re: {} })

// 输入手机号后查询会员卡号
const handleCheck = () => {
    // console.log('toTel :>> ', toTel);
    // 查询手机号下的会员卡
    const data = { mobile: form.re.toTel || 0 }
    Api.Common.PcObjProcess.Do({ "functionName": "GetMemberCar", "orgCode": "0004", "contentData": data }).then(res => {
        console.log('查询手机号下的会员卡 res :>> ', res, user.re.cardList[currentCard.value]);
        form.re.name = res.name
        // form.re.memberCode = res.memberCode
        cardType_options.re = []
        res.carList.forEach(item => {
            if (item.cardType == user.re.cardList[currentCard.value].cardType) {
                cardType_options.re.push(item)
            }
        })
        if (cardType_options.re.length > 0) {
            form.re.typeCode = cardType_options.re[0].no
        }
    })
}

// watch(form.re, (nVal) => {
//     console.log('资产转移里的卡号类型变了', nVal)
// }, { deep: true })

// watch(() => form.re.typeCode, (oldvalue, newvalue) => {

// })

// 取消
const emit = defineEmits(['emitCancel', 'emitSubmit'])
const handleCancel = (params) => {
    emit('emitCancel', 'cancel')
}
// 确认
const formRef = ref()
const handleSubmit = (params) => {
    console.log('form.re :>> ', form.re);
    formRef.value.validate(valid => { //表单验证
        if (valid) {
            let data = {
                fromNo: user.re.cardList[currentCard.value].cardNo,
                fromAmt: form.re.fromAmt,
                fromCoins: form.re.fromCoins || 0,
                fromPoint: form.re.fromPoint || 0,
                toNo: form.re.typeCode,
                fromPreAmt:form.re.fromPreAmt || 0,
                remark: form.re.remark
            }
            console.log('data :>> ', data);
            // return
            Api.Common.PcObjProcess.Do({ "functionName": "TranMemberAmtToOther", "orgCode": "0004", "contentData": data }).then(res => {
                console.log('会员卡资产转移 res :>> ', res);
                ElNotification({
                    title: '提示',
                    message: '资产转移成功',
                    type: 'success',
                })
                emit('emitSubmit', 'Submit')
            })
        }
    })
}
</script>
  
<style  lang="scss" scoped>
    @import '@/styles/com_style_input.css';
.dialog-box {

    ::v-deep {
        .el-dialog {
            width: 1000px;
            // height: 800px;
            border-radius: 16px;
            padding-left: 60px;
            padding-right: 60px;
            padding-bottom: 40px;
        }

        .el-dialog__title {
            font-weight: bold;
            font-size: 20px;
            color: #212121;
            line-height: 36px;
            // padding-left: 60px;
        }

        .el-divider {
            margin: 0;
        }
    }

    .footer-box {
        margin-top: 10px;
        display: flex;
        justify-content: center;

        .cancel {
            width: 160px;
            height: 60px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FF6A00;
            font-size: 24px;
            color: #FF6A00;
        }

        .submit {
            width: 160px;
            height: 60px;
            background: #FF6A00;
            border-radius: 8px;
            font-size: 24px;
            color: #FFFFFF;
            margin-left: 30px;
        }
    }
}

.dialog {
    .my-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .header-tip {
            font-weight: 400;
            font-size: 16px;
            color: #FF6A00;
        }
    }

    .dialog-content {
        padding: 20px 125px 0px 170px;

        .rule-box {
            .title {
                font-weight: bold;
                font-size: 18px;
                color: #212121;
                margin-bottom: 10px;
            }

            .content {
                margin-bottom: 6px;
                padding-left: 20px;
                font-weight: 400;
                font-size: 16px;
                color: #212121;
            }
        }

        .el-form {
            margin-top: 40px;

            .form {
                // display: flex;
                // justify-content: space-between;
                // flex-wrap: wrap;
                margin-top: 20px;

                ::v-deep {
                    .el-form-item__label {
                        line-height: 48px;
                    }

                    .el-select__wrapper {
                        height: 48px;
                        // background: #F9F9F9;
                        border-radius: 8px;
                        font-weight: 400;
                        font-size: 16px;
                        color: #212121;
                    }

                    .el-input__wrapper {
                        height: 48px;
                        // background: #F9F9F9;
                        border-radius: 8px;
                        font-weight: 400;
                        font-size: 16px;
                        color: #212121;
                    }
                }
            }
        }

    }
}
</style>
  